<template>
  <div class="app-container">
    <el-form ref="listFilterRef" :model="list.filter" inline>
      <el-form-item prop="mchId">
        <merchantSelect
          v-model="list.filter.mchId"
          placeholder="请输入平台商户名称"
        />
      </el-form-item>
      <el-form-item prop="name">
        <el-input
          v-model="list.filter.name"
          placeholder="请输入微信商户名称"
          clearable
        />
      </el-form-item>
      <el-form-item prop="payMchId">
        <el-input
          v-model="list.filter.payMchId"
          placeholder="请输入微信商户号"
          clearable
        />
      </el-form-item>
      <el-form-item prop="createEndTime">
        <TimeRangePicker
          type="date-time"
          :start.sync="list.filter.createBeginTime"
          :end.sync="list.filter.createEndTime"
          placeholder="创建起始时间/创建截止时间"
        />
      </el-form-item>
      <el-form-item prop="updateTime">
        <TimeRangePicker
          type="date-time"
          :start.sync="list.filter.updateBeginTime"
          :end.sync="list.filter.updateEndTime"
          placeholder="更新起始时间/更新截止时间"
        />
      </el-form-item>
      <el-button @click="reset">重置</el-button>
    </el-form>

    <div class="table-operation">
      <span>
        <auth-button
          name="新增商户"
          @click="$refs.TypeSelect.show()"
          type="primary"
        ></auth-button>
      </span>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
      />
    </div>

    <!-- 状态筛选 -->
    <StatusFilter
      ref="StatusFilter"
      v-model="list.filter.status"
      :query="list.filter"
    />

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column prop="mchId" label="平台商户ID" />
      <el-table-column prop="merchantName" label="平台商户名称" />
      <el-table-column prop="name" label="微信商户名称" />
      <el-table-column prop="payMchId" label="微信商户号" />
      <el-table-column prop="organizationType" label="微信商户类型">
        <template slot-scope="{ row }">
          {{ row.organizationType | $value2label(enterpriseTypeList) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="{ row }">
          {{ row.status | $value2label(statusList) }}
        </template>
      </el-table-column>
      <!-- 倩哥：没有创建人 -->
      <!-- <el-table-column prop="" label="创建人" /> -->
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="updateTime" label="更新时间" />
      <el-table-column prop="operatorName" label="更新人" />
      <el-table-column label="操作" align="center" width="260">
        <template slot-scope="{ row }">
          <auth-button name="查看" @click="r(row)"></auth-button>
          <auth-button
            name="查看进度"
            @click="$refs.Progress.show(row)"
            type="primary"
            v-if="row.status != 0 && row.status != 6"
            circle
          >
            <i class="el-icon-s-flag"></i>
          </auth-button>
          <auth-button
            name="修改结算账户"
            @click="$refs.Maccount.show(row)"
            type="primary"
            v-if="row.status == 6"
            circle
          >
            <i class="el-icon-s-finance"></i>
          </auth-button>
          <auth-button
            name="重置申请"
            @click="refresh(row)"
            v-if="row.status == 6"
            circle
          >
            <i class="el-icon-refresh-right"></i>
          </auth-button>
          <template v-if="row.status == 0 || row.status == 3">
            <auth-button name="编辑" @click="u(row)"></auth-button>
            <auth-button name="删除" @click="d(row)"></auth-button>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <Form
      :form.sync="form"
      :formTitle="formTitle"
      :submitForm="submitForm"
      ref="formRef"
    />

    <!-- 选择添加类型 -->
    <TypeSelect ref="TypeSelect" @confim="createdAccount" />

    <!-- 查看进度 -->
    <Progress ref="Progress" />

    <!-- 修改结算账户 -->
    <ModifyAccount ref="Maccount" />
  </div>
</template>

<script>
import { ref } from 'vue'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import pageMixin from '@/utils/pageMixin'
import Form from './Form.vue'
import StatusFilter from './components/StatusFilter'
import merchantSelect from '@/components/merchantSelect'
import TypeSelect from './components/TypeSelect'
import Progress from './components/Progress'
import ModifyAccount from './components/ModifyAccount'

export default {
  components: {
    Form,
    StatusFilter,
    merchantSelect,
    TypeSelect,
    Progress,
    ModifyAccount
  },
  mixins: [pageMixin],
  setup: () => {
    const formRef = ref(null)
    const admate = useAdmateAdapter(
      {
        axiosConfig: {
          c: {
            url: 'update'
          },
          r: {
            url: 'selectOne'
          }
        },
        urlPrefix: '/sot-admin-api/merchant/applyment',
        form: {
          data: {
            applymentJson: {
              accountInfo: {},
              contactInfo: {
                contactType: '65'
              },
              businessLicenseInfo: {
                __businessTime: []
              },
              salesSceneInfo: {},
              idDocType: 'IDENTIFICATION_TYPE_MAINLAND_IDCARD',
              idDocInfo: {},
              idCardInfo: {},
              settlementInfo: {},
              uboInfoList: []
            }
          },
        },
        submitFormProxy (submitForm) {
          return new Promise((resolve, reject) => {
            submitForm()
              .then(() => {
                resolve()
              })
              .catch(e => {
                console.error(e)
                reject()
              })
          })
        }
      },
      {
        getElFormRefOfFormData() {
          return this.$refs.formRef
        },
        afterOpenForm (res) {
          // 主体类型，打开表单之前必传
          if (!admate.form.value.data.applymentJson.organizationType) {
            admate.form.value.show = false
            throw Error('主体类型为空')
          }

          this.$refs.formRef.openFormCallback()

          // 回显表单后，清除校验
          admate.clearValidateOfFormData.value()
        },
        closeFormCallback () {
          formRef.value.closeFormCallback()

          // 关闭表单后，清除校验
          admate.clearValidateOfFormData.value()
        }
      }
    )
    return {
      ...admate,
      formRef
    }
  },
  data () {
    return {
      enterpriseTypeList: TypeSelect.enterpriseTypeList,
      statusList: StatusFilter.statusList
    }
  },
  watch: {
    'form.show' (n) {
      if (!n) {
        this.updateStatusNum()
        this.getList()
      }
    }
  },
  methods: {
    createdAccount (type) {
      this.form.data.applymentJson.organizationType = type
      this.c()
    },
    updateStatusNum () {
      this.$refs.StatusFilter.getApplyMerchantNumber() // 更新每个类型的数量
    },

    // 重置申请
    refresh (row) {
      this.$confirm(
        '执行重置申请后，当前商户进件信息不再展示，商户可重新进件，在未完成商户二次进件前，商户仍可使用重置前商户号开展交易。请确认是否继续重置！',
        '操作提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }
      ).then(() => {
        this.$POST('/sot-admin-api/merchant/applyment/delete', {
          id: row.id
        }).then(res => {
          this.$swal.success('重置成功')
          this.getList()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
